<template>
  <div>
    <el-button class="mt-4" style="width: 50%" @click="GetAllMachine">
      查找所有机器
    </el-button>
    <el-table :data="tableData.machine" border style="width: 100%; border: 1px solid red;">
      <el-table-column type="index" label="编号" width="150" />
      <el-table-column v-for="col in columnList" :prop="col.prop" :label="col.label" :key="col.prop">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
            删除
          </el-button>
          <el-button link type="primary" size="small" @click.prevent="machineInfo(scope.$index)">
            机器信息
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button class="mt-4" style="width: 50%" @click="tableData.isAdd = true">
      添加
    </el-button>
  </div>
  <el-form v-if="tableData.isAdd" ref="ruleFormRef" :model="tableData" status-icon label-width="120px" class="demo-ruleForm">
    <el-form-item label="机器状态" prop="state">
      <el-input v-model="tableData.state" type="state" autocomplete="off" />
    </el-form-item>
    <el-form-item label="机器IP" prop="localIp">
      <el-input v-model="tableData.localIp" type="localIp" autocomplete="off" />
    </el-form-item>
    <el-form-item label="机器端口" prop="localPort">
      <el-input v-model="tableData.localPort" type="localPort" autocapitalize="off"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import axios from 'axios'
import { useStore } from 'vuex'
import router from '@/router'

const store = useStore()

const ruleFormRef = ref<FormInstance>()

const columnList = [
  { prop: 'id', label: '机器ID', show: true },
  { prop: 'state', label: '机器状态', show: true },
  { prop: 'localIp', label: '机器IP', show: true },
  { prop: 'localPort', label: '机器端口', show: true }
]

const tableData = reactive({
  machine: [],
  isAdd: false,
  state: 0,
  localIp: 'localhost',
  localPort: 8234
})

const deleteRow = (index: number) => {
  axios.delete('/machine/del/'.concat(tableData.machine[index].id))
  tableData.machine.splice(index, 1)
}

const machineInfo = (index: number) => {
  store.commit('SET_MACHINEINFO', tableData.machine[index])
  router.push('/')
  return 1
}

const GetAllMachine = () => {
  axios.get('/machine/list')
    .then((response) => {
      tableData.machine = response.data.data
    })
}

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      axios.post('/machine/add', {
        state: tableData.state,
        localIp: tableData.localIp,
        localPort: tableData.localPort
      }).then(() => {
        GetAllMachine()
      })
    } else {
      console.log('error submit!')
      return false
    }
  })
  tableData.isAdd = false
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<style>
  div{
    text-align: center;
  }
  .table{
    text-align: center;
    width: 50%;
    padding-left: 20%;
    padding-right: 20%;
  }
</style>
